<template>
  <div class="h100 f f-col bg-white">
    <!-- Swiper -->
    <div class="swiper-container" style="padding:15px 0;">
      <div class="swiper-wrapper">
        <div class="swiper-slide round overhidden">
          <img src="../../static/img/banner2.png" width="100%" height="100%">
        </div>
        <div class="swiper-slide round overhidden">
          <img src="../../static/img/banner1.png" width="100%" height="100%">
        </div>
        <div class="swiper-slide round overhidden">
          <img src="../../static/img/banner3.png" width="100%" height="100%">
        </div>
        <div class="swiper-slide round overhidden">
          <img src="../../static/img/banner4.png" width="100%" height="100%">
        </div>
      </div>
    </div>
    <!-- 入口 -->
    <div class="h100 scroll p15">
      <div class="round f j-s a-s f-wrap c999">
        <div class="w100 bg-white p15 f j-b a-c van-hairline--bottom">
          <div class="f j-b a-c">
            <span class="f a-c"></span>
            <span class="b">商铺管理</span>
          </div>
        </div>
        <div class="van-hairline--top"></div>
        <div
          v-for="(item,index) in shopMenuData"
          :key="index"
          @click="$link(item.link)"
          class="w50 bg-white rel f j-c a-c"
          style="width:33.3%;height:3rem"
        >
          <div class="f f-col">
            <p class="f m-auto" style="width:1rem;height:1rem;">
              <img class="img-cover" :src="item.ico">
            </p>
            <p class="f14 c666">{{item.name}}</p>
          </div>
        </div>
        <div class="w50 bg-white rel f j-c a-c" style="width:33.3%;height:3rem"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "shop",
  data() {
    return {
      shopMenuData: [
        {
          name: "商品管理",
          ico: "./static/img/shop03.png",
          link: "../food"
        },
        {
          name: "商铺资料",
          ico: "./static/img/shop01.png",
          link: "../shop_view"
        },
        {
          name: "入住信息",
          ico: "./static/img/shop02.png",
          link: "../ruzhu"
        },
        {
          name: "员工管理",
          ico: "./static/img/shop04.png",
          link: "../yuangong"
        },
        {
          name: "扫码管理",
          ico: "./static/img/shop05.png",
          link: "../erweima"
        },
        {
          name: "物料商城",
          ico: "./static/img/shop07.png",
          link: "../ruzhu"
        },
        {
          name: "推荐有礼",
          ico: "./static/img/shop08.png",
          link: "../ruzhu"
        }
      ]
    };
  },
  mounted() {
    var swiper = new this.$Swiper(".swiper-container", {
      effect: "coverflow",
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: "auto",
      loop: true,
      coverflowEffect: {
        rotate: 40,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true
      }
    });
  },
  methods: {}
};
</script>


<style scoped>
.banner1 {
  background: url(../../static/img/mineBg.png) no-repeat;
  background-size: 100% 100%;
}
.swiper-container {
  width: 100%;
  height: 4rem;
}
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 9rem;
  height: 100%;
}
</style>
<style>
.swiper-container-3d .swiper-slide-shadow-left {
  background: none;
}
.swiper-container-3d .swiper-slide-shadow-right {
  background: none;
}
</style>
